<template>
  <div>
    <el-row>
      <el-col :span=6>
        <clock></clock>
      </el-col>
      <el-col :span=6>
        <data-set title="教室数" url="/api/classroom/count/all" :interval=0></data-set>
      </el-col>
      <el-col :span=6>
        <data-set title="设备数" url="/api/device/count/all" :interval=0></data-set>
      </el-col>
      <el-col :span=6>
        <data-set title="用户数" url="/api/user/count/all" :interval=0></data-set>
      </el-col>
    </el-row>
    <el-row style="margin: 10px">
      <el-col :span=12 style="padding-right: 10px;">
        <div style="border-left: 5px solid #409EFF; padding-left: 10px">本周分配执行情况</div>
        <div id="week-chart" style="margin-top: 20px"></div>
      </el-col>
      <el-col :span=6 style="padding-left: 10px">
        <div style="border-left: 5px solid #409EFF; padding-left: 10px">教室预约</div>
        <div style="padding-top: 20px">
          <el-collapse>
            <el-collapse-item v-for="item in apply"
                              :key="item.$index"
                              :title="formatDate(item.activityDate) + ' ---- ' + item.activityDescription">
              <el-descriptions :title="item.activityDescription" :column=1>
                <el-descriptions-item label="预约人">{{ item.applicant }}</el-descriptions-item>
                <el-descriptions-item label="活动时间">{{ item.activityDate | formatDate }}</el-descriptions-item>
                <el-descriptions-item label="描述">{{ item.activityDescription }}</el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
      <el-col :span=6 style="padding-left: 20px">
        <div style="border-left: 5px solid #409EFF; padding-left: 10px">维修申请</div>
        <div style="padding-top: 20px">
          <el-collapse>
            <el-collapse-item v-for="item in maintenance"
                              :key="item.$index"
                              :title="item.classroomCode + ' ---- ' + item.faultDescription">
              <el-descriptions :title="item.classroomCode + ' ---- ' + item.faultDescription" :column=1>
                <el-descriptions-item label="故障位置">{{ item.classroomCode }}</el-descriptions-item>
                <el-descriptions-item label="申请人">{{ item.applicant }}</el-descriptions-item>
                <el-descriptions-item label="故障描述">{{ item.faultDescription }}</el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {Column} from '@antv/g2plot';
import Formatter from "../../utils/formatter";
import DataSet from "../../components/DataSet";
import Clock from "../../components/Clock";
import {countAssignmentInWeek} from "@/api/assignment";
import {listMaintenanceRecords} from "@/api/maintenanceRecord";
import {listActivityRoomApplications} from "@/api/activityRoomApplication";

export default {
  name: 'Dashboard',
  components: {Clock, DataSet},
  data() {
    return {
      apply: [],
      maintenance: []
    }
  },
  created() {
    this.$nextTick(function () {
      this.drawAssignmentweekChart()
    })
    this.getApplication();
    this.getMaintenance();
  },
  methods: {
    drawAssignmentweekChart() {
      let data = [];
      const columnPlot = new Column('week-chart', {
        data,
        xField: 'label',
        yField: 'value',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          label: {
            alias: '日期',
          },
          value: {
            alias: '分配执行数',
          },
        },
      });
      columnPlot.render();
      countAssignmentInWeek().then((response) => {
        columnPlot.changeData(response.data.data)
      })

    },

    getApplication() {
      listActivityRoomApplications(1, 4).then((response) => {
        this.apply = response.data.data.list
      })
    },
    getMaintenance() {
      listMaintenanceRecords(1, 4).then((response) => {
        this.maintenance = response.data.data.list
      })
    },
    formatDate(date) {
      return Formatter.formatDate(date, 'YYYY-MM-DD')
    }
  },
  filters: {
    formatDate(date) {
      return Formatter.formatDate(date, 'YYYY-MM-DD')
    }
  }
}
</script>

<style scoped>

</style>
